<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      style: {
        width: "1920",
        height: "1080",
        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
      },
    };
  },
  methods: {
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      return { x: w, y: h };
    },
    setScale() {
      let scale = this.getScale();
      this.style.transform =
        "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(0px, 0px)";
    },
  },
  mounted() {
    let that = this;
    that.setScale();
    /*窗口改变事件*/
    window.onresize = () => {
      return (() => {
        this.$nextTick(() => {
          console.log();
          that.setScale();
        });
      })();
    };
  },
  watch: {},
  computed: {},
  filters: {},
  components: {},
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#app {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 0%;
  top: 0%;
  transition: 0.3s;
  /* overflow: hidden; */
}
.el-picker-panel {
  position: absolute !important;
  top: 90px !important;
  left: 1155px !important;

  /* .popper__arrow {
    right: 0px !important;
    left: 90% !important;
  } */
}

.popper__arrow {
  right: 0px !important;
  left: 90% !important;
}
</style>
